/*
图像操作是通过 <canvas> 元素来实现的：
1. 使用 canvas.drawImage 在 canvas 上绘制图像（或图像的一部分）。
2. 调用 canvas 方法 .toBlob(callback, format, quality)  创建一个 Blob ，并在创建
完成后使用其运行 callback

在下面这个示例中，图像只是被复制了，
不过我们可以在创建 blob 之前，
从中裁剪图像，
或者在 canvas 上对其进行转换：
*/

// 获取任何图像
let img = document.querySelector('img');
// 生成同尺寸的 <canvas>
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
let context = canvas.getContext('2d');
// 向  canvas  中复制图像（此方法允许剪裁图像）
context.drawImage(img, 0, 0);
// 我们 context.rotate()，并在 canvas 上做很多其他事情

//  方法一：toBlob 是异步操作，结束后会调用 callback
canvas.toBlob(function (blob) {
    // blob 创建完成，下载它
    let link = document.createElement('a');
    link.download = 'example.png';
    link.href = URL.createObjectURL(blob);
    link.click();
    // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
    URL.revokeObjectURL(link.href);
}, 'image/png');

// 方法二：如果我们更喜欢 async/await 而不是 callback：
let blob = await new Promise(
    resolve => canvas.toBlob(resolve, 'image/png')
);